<template>
  <div>
    <div class="fly-panel" style="margin-bottom: 0;">
        <div class="fly-panel-title fly-filter">
          <a :class="{'layui-this': status === '' && tag ===''}" @click.prevent="search()">综合</a>
          <span class="fly-mid"></span>
          <a :class="{'layui-this': status === 0 && tag ===''}" @click.prevent="search(0)">未结</a>
          <span class="fly-mid"></span>
          <a :class="{'layui-this': status === 1 && tag ===''}" @click.prevent="search(1)">已结</a>
          <span class="fly-mid"></span>
          <a :class="{'layui-this': status === '' && tag ==='精华'}" @click.prevent="search(2)">精华</a>
          <span class="fly-filter-right layui-hide-xs">
            <a :class="{'layui-this': sort === 'created'}" @click.prevent="search(3)">按最新</a>
            <span class="fly-mid"></span>
            <a :class="{'layui-this': sort === 'answer' }" @click.prevent="search(4)">热议</a>
          </span>
        </div>
        <ListItem :lists="lists" @nextpage="nextpage" :isEnd="isEnd"></ListItem>
      </div>
  </div>
</template>

<script>
import ListItem from './ListItem'
import { getList } from '@/api/content.js'

export default {
  name: 'list',
  components: {
    ListItem
  },
  data () {
    return {
      status: '',
      tag: '',
      sort: 'created',
      page: 0,
      limit: 20,
      catalog: '',
      lists: [],
      isRepeat: false,
      isEnd: false,
      current: ''
    }
  },
  mounted () {
    const catalog = this.$route.params.catalog
    if (typeof catalog !== 'undefined' && catalog !== '') {
      this.catalog = catalog
    }
    this._getList()
  },
  watch: {
    current (oldVal, newVal) {
      this.init()
    },
    '$route' (oldVal, newVal) {
      const catalog = this.$route.params.catalog
      if (typeof catalog !== 'undefined' && catalog !== '') {
        this.catalog = catalog
      }

      this.init()
    }
  },
  methods: {
    init () {
      this.page = 0
      this.isEnd = false
      this.lists = []
      this._getList()
    },
    _getList () {
      // if (this.isRepeat || this.isEnd) {
      //   return false
      // }
      this.isRepeat = true
      const options = {
        isEnd: this.status,
        tags: this.tag,
        sort: this.sort,
        isTop: 0,
        page: this.page,
        limit: this.limit,
        catalog: this.catalog
      }
      getList(options).then(res => {
        if (res.code === 200) {
          if (res.data.length < this.limit) {
            this.isEnd = true
          }
          if (this.lists.length) {
            this.lists = this.lists.concat(res.data)
          } else {
            this.lists = res.data
          }
        }
      }).catch((err) => {
        if (err) {
          this.$alert(err)
        }
      }).finally(() => {
        this.isRepeat = false
      })
    },
    search (value) {
      if (typeof value === 'undefined' && this.current === '') {
        return
      }
      this.current = value
      switch (value) {
        // 未结帖
        case 0:
          this.status = 0
          this.tag = ''
          break
        // 已结贴
        case 1:
          this.status = 1
          this.tag = ''
          break
        // 精华帖
        case 2:
          this.status = ''
          this.tag = '精华'
          break
        // 最新
        case 3:
          this.sort = 'created'
          break
        // 按回复数量
        case 4:
          this.sort = 'answer'
          break
        default:
          this.status = ''
          this.tag = ''
          this.current = ''
          break
      }
    },
    nextpage () {
      this.page++
      this._getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
